<template>
  <div id="divml1">
    <!-- 以下为列表页搜索部分 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="">
        <el-input v-model="search" placeholder="搜索手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"><router-link tag="span" to="/membera/memberlistadd">添加会员</router-link></el-button>
      </el-form-item>
    </el-form>

    <!-- -----------表格--------------- -->
    <el-table
      ref="multipleTable"
      :data="tableData.filter(data => !search || data.phone.toLowerCase().includes(search.toLowerCase()))"
      tooltip-effect="dark"
      style="width: 100%"
      :header-cell-style="{ textAlign: 'center',background:'#f5f7fa' }"
      :cell-style="{ textAlign: 'center' }"
      @selection-change="handleSelectionChange"
      :row-key='getRowKey'
      border>
      <el-table-column type="selection" width="55" reserve-selection></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="card" label="会员卡"></el-table-column>
      <el-table-column prop="grade" label="会员等级"></el-table-column>
      <el-table-column prop="coach" label="教练"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          {{scope.row.status==1?"启用":"停用"}}
        </template>
      </el-table-column>
      <el-table-column label="操作" >
        <template slot-scope="scope">
        <el-button type="text" size="small" @click.native.prevent="look(scope.$index, tableData)">查看</el-button>
        <el-button type="text" size="small" @click.native.prevent="editor(scope.$index, tableData)">编辑</el-button>
        <el-button type="text" size="small"  @click.native.prevent="del(scope.$index, tableData)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

     <!-- -------分页------------ -->
    <el-pagination 
      background 
      layout="prev, pager, next" 
      :total="total" 
      :page-size="size"  
      @current-change="change"
      @prev-click="prev"
      @next-click="next">
    </el-pagination>
  
    <!-- 确认筛选 -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      id="el-form1">
      <el-select v-model="formInline.region" placeholder="批量操作">
        <el-option label="启用" value=1></el-option>
        <el-option label="停用" value=0></el-option>
        <el-option label="删除" value=2></el-option>
      </el-select>
      <el-form-item>
        <el-button type="primary" @click="editAll">确认</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { number } from 'echarts';
export default {
  data() {
    return {
      search:"",//查询
      value:"",//批量操作值
      user:"",
      con: "",
      a:{},
      arr2:"",
      tableData: [],
      // tableData1: [],  //搜索查询
      tableChecked:[],//选中记录的数据
      state:"",
      page: 1,
      size: 5,
      total: 0,
      // total1:0, //搜索查询
      formInline: {
        userid: "",
        username: "",
        region: "",
      }, //搜索栏
      multipleSelection: [], //列表
    };
  },

  methods: {
    del(index, data){  //删除接口
      this.$confirm("此操作将永久这条内容？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(()=>{
        this.$axios({
          url:"gym/user/delete",
          method:"post",
          data:{
            id:data[index].id,
          },
      }).then((res)=>{
          if(res.data.error){
            this.$message.error("删除失败");
          } else {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          this.getCon();
          }
        });
      }).catch(()=>{
          this.$message({
            type:"info",
            message:"已取消删除",
          });
        });
    },

  getCon() {  //页面获取接口
    this.$axios({
      url:"/gym/user/list",
      params: {
        page: this.page,
        limit:this.size,
      },
    }).then((res)=>{
        this.tableData = res.data.data;
        this.total = res.data.count;
      });
    },

  editAll(){  //批量操作
    this.arr2=this.tableChecked.map(item=>item.id);
    this.arr2.push(Number(this.formInline.region));
      this.$axios({
        url:"/gym/user/batchByIds",
        method:"post",
        dataType:"json",
        data:{
          ids:this.arr2
        }
      }).then((res)=>{
        this.getCon();
      })
    },

  onSubmit() {  //导出接口
    console.log("submit!");
  }, 

  toggleSelection(rows) {  //暂时保留
    console.log(rows);
    if(rows){
      rows.forEach((row)=>{
      this.$refs.multipleTable.toggleRowSelection(row);
      });
    }else{
      this.$refs.multipleTable.clearSelection();
    }
  },

  getRowKey(row){  //table需要的数据
    return row.id
  },

  handleSelectionChange(val) {
    this.multipleSelection=val;
  },//列表

  handleSelectionChange(val){
    this.tableChecked = val
  },//批量操作,后期核实与上面的冲突

  change(page){  //分页
    this.page = page;
    this.getCon();
  },

  prev(){  //点击上一页
    this.page--;
    this.getCon();
  },

  next(){ //点击下一页
    this.page++;
    this.getCon();
  },

  look(index, data){   //修改接口
          // sessionStorage.setItem('idc',data[index].id);  传id方法一
          // this.$router.push('/membera/memberlistlook')
          //传id方法二
          this.$router.push({path:'/membera/memberlistlook',name:'MemberListLook',params:{id:data[index].id}})
    },

  editor(index, data){   //修改接口
          // sessionStorage.setItem('idd',data[index].id);  传id方法一
          // this.$router.push('/membera/memberlisteditor')
          //传id方法二
           this.$router.push({path:'/membera/memberlisteditor',name:'MemberListEditor',params:{id:data[index].id}})
  },
}, 

  mounted(){  //页面挂载时
    this.getCon();
  },
};
</script>

<style scoped>
.demo-form-inline {
  float: left;
}
/* 搜索栏 */
.el-table {
  text-align: center;
}

#divml1{
  margin: 20px;
}

.divml {
  float: left;
}

#el-form1 {
  margin-top: 20px;
}
.el-select {
  margin-right: 10px;
}

.el-pagination {
  float: right;
  margin-top: 20px;
}
</style>
